<template>
  <div class="wrapper">
    <el-card shadow="never" style="margin-bottom: 20px">
      <el-select
        v-model="conditionId"
        @change="handleChangeCondition"
        clearable
        filterable
        placeholder="请选择"
      >
        <el-option
          v-for="item in conditionData"
          :key="item.id"
          :label="`按${item.name}添加`"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button
        @click="handleClickAdd"
        style="margin-left: 30px"
        type="primary"
        >添加条件</el-button
      >
    </el-card>
    <el-form :inline="true" :model="this" ref="ruleForm" :rules="rules">
      <el-table
        :data="conditionAll"
        :row-class-name="tableRowClassName"
        @selection-change="handleStepSelectionChange"
        style="width: 100%; margin-bottom: 20px"
        border
      >
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->

        <el-table-column label="条件" prop="name"> </el-table-column>
        <el-table-column label="关系" prop="condition" width="180px">
          <template slot-scope="scope">
            <el-form-item
              :prop="'conditionAll.' + scope.$index + '.condition'"
              :rules="rules.condition"
              style="margin-top: 16px"
            >
              <el-select
                v-model="scope.row.condition"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in getRelationData(scope.row)"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key * 1"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="值" prop="condition_value" width="180px">
          <template slot-scope="scope">
            <el-form-item
              :prop="'conditionAll.' + scope.$index + '.condition_value'"
              :rules="rules.condition_value"
              style="margin-top: 16px"
            >
              <template v-if="scope.row.value_type === 1">
                <el-input
                  v-model="scope.row.condition_value"
                  placeholder="请输入"
                ></el-input>
              </template>
              <!-- 报销类型 -->
              <template v-if="scope.row.value_type === 2">
                <el-select
                  v-model="scope.row.condition_value"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in scope.row.value_option"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
              <!-- <template v-if="scope.row.value_type === 3">
                                <el-select v-model="scope.row.condition_value" clearable filterable multiple
                                    placeholder="请选择">
                                    <el-option v-for="(item, index) in scope.row.value_option" :key="index"
                                        :label='item.label' :value="item.value">
                                    </el-option>
                                </el-select>
                            </template> -->
              <!-- 所属部门 -->
              <template v-if="scope.row.value_type === 4">
                <el-select
                  v-model="scope.row.condition_value"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in scope.row.value_option"
                    :key="index"
                    :label="item[`${scope.row.labelName}`]"
                    :value="item.id + ''"
                  >
                  </el-option>
                  <!-- item[`${scope.row.labelName}`] -->
                </el-select>
              </template>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="" width="80" align="left">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDelCondition(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div style="margin-top: 20px; text-align: right; padding-bottom: 20px">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleOk">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { ExamineCondition, DropData } from "@/api/auditing";
import { organizationBox, levelOptions } from "@/api/organization";

export default {
  name: "condition",
  components: {},
  props: ["condition_all", "scene_type"],
  data() {
    return {
      conditionData: [],
      value: "",
      conditionId: "",
      conditionAll: [],
      branchData: [],
      reimburData: [
        {
          key: "1",
          value: "运营费用",
        },
        {
          key: "2",
          value: "人事费用",
        },
        {
          key: "3",
          value: "销售费用",
        },
        {
          key: "4",
          value: "办公费用",
        },
        {
          key: "5",
          value: "其他费用",
        },
      ],
      relationData: [
        {
          key: "1",
          value: "包含",
        },
        {
          key: "2",
          value: "不包含",
        },
        {
          key: "3",
          value: "等于",
        },
        {
          key: "4",
          value: "大于等于",
        },
        {
          key: "5",
          value: "小于等于",
        },
      ],
      rules: {
        condition: [
          { required: true, message: "请选择关系", trigger: "change" },
        ],
        condition_value: [
          { required: true, message: "请填写值", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    getRelationData() {
      return function (row) {
        return this.relationData.filter((item) =>
          (row.conditionArr || []).includes(item.key)
        );
      };
    },
  },
  async mounted() {
    const res = await ExamineCondition({
      scene_type: this.scene_type,
    });
    if (res.code === 10000) {
      this.conditionData = res.data.list;
    }
    // levelOptions({
    //     pid: "1",
    //     name: ""
    // }).then((res) => {
    //     this.branchData = res.data;
    // });
    if (this.condition_all) {
      for (let i = 0; i < this.condition_all.length; i++) {
        const item = this.condition_all[i];
        const dataItem = this.conditionData.find(
          (m) => m.field_name === item.field_name
        );

        if (dataItem) {
          item.value_type = dataItem.value_type;
          item.name = dataItem.name;
          item.conditionArr = dataItem.condition;
          item.value_option = dataItem.value_option;
          item.url_param = dataItem.url_param;
          item.url = dataItem.url;
          await this.getValueOption(item);
        }
      }
      this.conditionAll = this.condition_all;
      // console.log(this.conditionAll, 'this.conditionAll');
    } else {
      this.conditionAll = [];
    }
  },
  methods: {
    async getValueOption(item) {
      // console.log(item, 'item=====');

      if (item.value_type === 2 || item.value_type === 3) {
        if (!Array.isArray(item.value_option)) {
          item.value_option = JSON.parse(item.value_option);
        }
      }
      if (item.value_type === 4 || item.value_type === 5) {
        const data = await this.getDropData(item);
        item.value_option = data;
      }
      // console.log(item, 'item=====');
    },
    // getRelationData(row) {
    //     // console.log(row,'rrrela');
    //     // this.relationData=this.relationData.filter(item=>row.conditionArr.includes(item.key))
    //     return this.relationData.filter(item => (row.conditionArr || []).includes(item.key));
    // },
    handleDelCondition(row) {
      this.conditionAll = this.conditionAll.filter(
        (item) => !(item.rowIndex === row.rowIndex)
      );
    },
    handleClose() {
      this.$emit("close");
    },
    handleOk() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        this.$emit("ok", this.conditionAll);
        this.handleClose();
      });
    },
    tableRowClassName(row, index) {
      row.row.rowIndex = row.rowIndex;
    },
    handleStepSelectionChange() {},
    async getDropData(item) {
      if (item.url_param.includes("not_show_first_branch")) {
        item.labelName = "branch_name";
        this.$set(item, "labelName", "branch_name");
        // console.log('11111111');
      } else {
        item.labelName = "name";
        this.$set(item, "labelName", "name");
        // console.log('222222');
      }
      const url_param = JSON.parse(item.url_param || "{}");

      const res = await DropData(url_param, item.url);
      return res.data;
    },
    async handleChangeCondition(val) {
      const selectItem = this.conditionData.find((item) => item.id === val);
      // console.log(selectItem, 'condition');
      // if (selectItem.value_type === 2 || selectItem.value_type === 3) {
      //     selectItem.value_option = JSON.parse(data || '[]');
      // }
      // if (selectItem.value_type === 4 || selectItem.value_type === 5) {
      //     const data = await this.getDropData(selectItem);
      //     selectItem.value_option = data;
      // }
      // // console.log(selectItem, 'selectItem.value_option');
      // this.conditionAll.push({
      //     field_name: selectItem.field_name,
      //     value_type: selectItem.value_type,
      //     value_option: selectItem.value_option,
      //     "url": selectItem.url,
      //     "url_param": selectItem.url_param,
      // });
    },
    async handleClickAdd() {
      if (!this.conditionId) {
        this.$message({
          message: "请先设置条件！",
          type: "warning",
        });
        return;
      }
      const selectItem = this.conditionData.find(
        (item) => item.id === this.conditionId
      );
      // if (selectItem.value_type === 2 || selectItem.value_type === 3) {
      //     selectItem.value_option = JSON.parse(selectItem.value_option || '[]');
      // }
      // if (selectItem.value_type === 4 || selectItem.value_type === 5) {
      //     const data = await this.getDropData(selectItem);
      //     selectItem.value_option = data;
      // }
      await this.getValueOption(selectItem);
      this.conditionAll.push({
        name: selectItem.name,
        field_name: selectItem.field_name,
        value_type: selectItem.value_type,
        value_option: selectItem.value_option,
        conditionArr: selectItem.condition,
        url_param: selectItem.url_param,
        url: selectItem.url,
        labelName: selectItem.labelName,
      });
      this.conditionId = "";
      // console.log(this.conditionAll, ' this.conditionAll');
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>